<template>
  <div class="app-container">
    <el-form :model="formData"
             label-width="120px"
             label-position="left">
      <el-form-item label="管理员登录账号">
        <el-input v-model="formData.account"></el-input>
      </el-form-item>
      <el-form-item label="管理员登录密码">
        <el-input placeholder="不修改密码请留空"
                  v-model="formData.password"
                  show-password></el-input>
      </el-form-item>
      <el-form-item label="管理员姓名">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="头像">
        <el-row>
          <el-col :span="3">
            <el-upload :action="uploadUrl"
                       accept="image/jpeg,image/gif,image/png"
                       :before-upload="onBeforeUpload"
                       :multiple="false"
                       :on-success="uploadSuccess">
              <el-button size="small"
                         type="primary">点击上传</el-button>
            </el-upload>
          </el-col>
          <el-col :span="2">
            <el-avatar shape="square"
                       size="large"
                       :src="formData.avatar"></el-avatar>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="管理员角色">
        <el-select v-model="formData.role">
          <el-option v-for="item in roleList"
                     :key="item.roleId"
                     :label="item.roleName"
                     :value="item.roleId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="管理员描述">
        <el-input type="textarea"
                  v-model="formData.introduction"></el-input>
      </el-form-item>

      <el-form-item label="大学管理员">
        <el-select v-model="formData.universityId"
                   placeholder="请选择大学"
                   style="width:150px">
          <el-option key="-1"
                     label="全部"
                     value="-1"></el-option>
          <el-option v-for="item in universityList"
                     :key="item.universityId"
                     :label="item.universityName"
                     :value="item.universityId">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="submit-box">
      <el-button type="primary"
                 :loading="loading"
                 style="width: 200px;"
                 @click.native.prevent="doSubmit">提交</el-button>
    </div>
  </div>
</template>

<script>
import { edit, getDetail } from '@/api/admin'
import { getAll } from '@/api/role'
import { errorMsg, successMsg } from '@/utils/my'
import { getAll as getUniversityAll } from '@/api/university'

export default {
  data () {
    return {
      loading: false,
      roleList: [],
      universityList: [],
      formData: {
        id: 0,
        name: '',
        avatar: '',
        account: '',
        password: '',
        role: '',
        introduction: '',
        universityId: ''
      }
    }
  },

  created () {
    this.formData.id = this.$route.params.id
    this.getAllRole()
    this.fetchUniversityList()
    this.fetchData()
  },
  computed: {
    uploadUrl () {
      return `${process.env.VUE_APP_BASE_API}/upload`
    }
  },
  methods: {
    onBeforeUpload (file) {
      const isImage = file.type === 'image/jpeg' || 'image/gif' || 'image/png';
      const isLimit1M = file.size / 1024 / 1024 < 1;
      if (!isImage) {
        this.$message.error('上传文件只能是图片格式!');
      }
      if (!isLimit1M) {
        this.$message.error('上传文件大小不能超过 1MB!');
      }
      return isImage && isLimit1M;
    },
    fetchData () {
      let that = this
      getDetail({ id: that.formData.id }).then(res => {
        that.formData.role = res.data.role
        that.formData.name = res.data.adminName
        that.formData.account = res.data.adminAccount
        that.formData.avatar = res.data.adminAvatar
        that.formData.introduction = res.data.introduction
        that.formData.universityId = res.data.adminUniversityId.length <= 0 ? '' : parseInt(res.data.adminUniversityId)
      })
    },

    doSubmit () {
      let that = this,
        d = that.formData
      if (d.account.length <= 0) {
        return errorMsg('请输入管理员登录账号')
      }
      if (d.password.length > 0 && d.password.length < 6) {
        return errorMsg('管理员密码至少6位')
      }
      if (d.name.length <= 0) {
        return errorMsg('请输入管理员姓名')
      }
      if (d.role.length <= 0) {
        return errorMsg('请选择管理员角色')
      }
      d.universityId = d.universityId.length <= 0 ? '' : d.universityId.toString()
      that.loading = true
      edit(d).then(res => {
        that.loading = false
        if (res.code != 20000) {
          return errorMsg(res.message)
        }
        successMsg(res.message)
        setTimeout(function () {
          that.$router.push({ path: '/admin/user' })
        }, 1500)
      })
    },

    uploadSuccess (res) {
      this.formData.avatar = res.data.url
    },
    fetchUniversityList () {
      const that = this
      getUniversityAll().then(res => {
        that.universityList = res.data
      })
    },
    getAllRole () {
      let that = this
      getAll().then(res => {
        that.roleList = res.data
      })
    }

  }
}
</script>

<style>
.submit-box {
  height: 50px;
  line-height: 50px;
  text-align: center;
  padding-right: 20px;
}
</style>
